<template>
  <div class="car">
    <!-- <van-nav-bar
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  /> -->
    <div class="pd10 clear" @click="deletAll(arr)">清空购物车</div>
    <ul>
      <li v-for="(item,index) in carlist" :key="index">
        <input class="tui-checkbox" type="checkbox" v-model="item.onecheck" @change="oneCheck(item.onecheck,index)" />
        <div class="goods">
          <div class="content">
            <img :src="item.picUrl" alt="" />
            <div class="good">
              <p class="good1">{{item.goodsName}}</p>
              <div class="good2" >
                <p v-for="(it,i) in item.specifications" :key="i">{{it}}</p>
              </div>
              <div class="prices">
                <div class="price">￥{{item.price}}</div>
                <div class="number">
                  <span @click="cut(index)">-</span>
                  <span>{{item.number}}</span>
                  <span @click="add(index)">+</span>
                </div>
              </div>
              <div class="delete" @click="deleteClick(item.productId)">删除</div>
            </div>
          </div>
          <div class="time">添加日期：{{item.updateTime}}</div>
        </div>
      </li>
    </ul>

    <van-submit-bar :price="total" button-text="确认订单" @submit="onSubmit(total)">
      <p>全选</p>
      <input type="checkbox" class="tui-checkbox" v-model="allcheck" @change="allChoose(allcheck)" />
    </van-submit-bar>
  </div>

  
</template>
<script>
import { carList , deleteList } from '../../assets/api/carapi.js'
import { Toast } from 'vant';
export default {
  data(){
    return{
      carlist:{},
      onecheck:false,
      allcheck:false,
      total:0
    }
  },
  created(){
    this.getCarlist()
  },
  methods:{
    // onClickLeft(){
    //   this.$router.go(-1)
    // },
    getCarlist(){
      carList().then(r=>{
        // console.log(r.data.data.cartList)
        this.carlist = r.data.data.cartList
      })
    },
    getPrice(){
      let sum = 0
      for(let x in this.carlist){
        if(this.carlist[x].onecheck == true){
          sum += this.carlist[x].price * this.carlist[x].number
        }
      }
      this.total = sum * 100
    },
    oneCheck(onecheck,index){
      if(onecheck == true){
        this.carlist[index].onecheck = true
      }else{
        this.carlist[index].onecheck = false
      }
      let f1 = this.carlist.every(item=>{
          return item.onecheck == true
      })
      if(f1 == true){
          this.allcheck = true
      }else{
          this.allcheck = false
      }
      this.getPrice()
    },
    allChoose(allcheck){
      if(allcheck == true){
          this.allcheck = true
          for(let x in this.carlist){
            this.carlist[x].onecheck = true                    
          }
      }else{
          this.allcheck = false
          for(let x in this.carlist){
            this.carlist[x].onecheck = false
          }
      }
      this.getPrice()
    },
    deleteClick(productId){
      deleteList([productId]).then(r=>{
        // console.log(r)
        this.getCarlist()
      })
      this.getPrice()
    },
    deletAll(){
      let arr = []
      console.log(this.carlist)
      for(let x in this.carlist){
          arr.push(this.carlist[x].productId)
        }
      console.log(arr)
      deleteList(arr).then(r=>{
        console.log(r.data)
        this.getCarlist()
      })
      this.getPrice()
    },
    add(index){
      this.carlist[index].number = Number(this.carlist[index].number) + 1
      this.getPrice()
    },
    cut(index){
      this.carlist[index].number = Number(this.carlist[index].number) - 1
      this.getPrice()
    },
    onSubmit(total){
      let arr = []
        if(total == 0){
            Toast('请勾选你所需要的商品')
        }else{
          for(let x in this.carlist){
            if(this.carlist[x].onecheck == true){
              arr.push({
                t:this.carlist[x]
              })
            }
          }
          // console.log(arr)
          let tt = JSON.stringify(arr)
          this.$store.state.orderlist = tt
          // console.log(this.$store.state.orderlist)
          this.$router.push('/carcheck')
        }
    },
  }
};
</script>
<style lang="scss" scoped>
@import '@/assets/css/car.scss';
</style>
